<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.container {
				/* position: relative; */
				/* 	display: flex;
				align-items: center; */
				height: 300px;
				background-color: orange;
			}
			.box1 {
				width: 100px;
				height: 100px;
				background-color: #f00;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto 0;
			}
			.box2 {
				background-color: #f00;
			}
			.box3 {
				display: inline-block;
				height: 100px;
				background-color: #f00;

				position: relative;
				top: 50%;
				/* margin-top的百分比是相对于包含块(父元素)的宽度 */
				/* margin-top: 50%; */
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<!-- 
    水平居中:
      1. 行内级元素
        设置父元素text-align: center
      2. 块级元素
        设置当前块级元素(宽度) margin: 0 auto
      3. 绝对定位
        元素有宽度情况下, left:0; right:0; margin: 0 auto;
      4. flex
        justify-content: center
    -->

		<!-- 
      垂直居中
        1. 绝对定位
          元素有高度情况下: top: 0; bottom: 0; margin: auto 0;
          弊端:
            1. 必须使用定位(脱离标准量)
            2. 必须设置高度

        2. flex布局
          display: flex; align-item: center;
          弊端:
            1. 当前flex布局中的所有元素都会被垂直居中
            2. 兼容性有一点差

        3. translate
          1. 兼容性要比flex布局好一点
          2. 不会影响其他元素
    -->
		<div class="container">
			<!-- <div class="box1"></div> -->
			<!-- <div class="box2">box2 flex布局</div> -->
			<div class="box3">
				box3 transform:translate(-50%, -50%)实现垂直居中
			</div>
		</div>
	</body>
</html>
